<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>layout</title>
    <link href="../src/kiss-ui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div class="k-header">
        <div class="left">
            <i class="fa fa-chevron-left"></i>
        </div>
        <div class="middle">kiss-ui</div>
        <div class="right">
            <i class="fa fa-ellipsis-h"></i>
        </div>
    </div>
    <div class="k-navbar">
        <a class="navbar-item">
            <i class="fa fa-home icon"></i>
            <span class="name">首页</span>
        </a>
        <a class="navbar-item active">
            <i class="fa fa-list icon"></i>
            <span class="name">通讯</span>
        </a>
        <a class="navbar-item">
            <i class="fa fa-search icon"></i>
            <span class="name">发现</span>
        </a>
        <a class="navbar-item">
            <i class="fa fa-user-o icon"></i>
            <span class="name">我的</span>
        </a>
    </div>
    <div class="k-content">
        <div class="k-article fold">
            <h1 class="k-article-title">什么是UI框架？</h1>
            <p class="k-article-info">作者：Rosen &emsp; 日期：2020-08-28</p>
            <div class="k-article-content">
                <h2 class="k-article-subtitle">UI是什么？</h2>
                <p class="k-article-paragraph">先来说下UI，这俩字母是User Interface的缩写，一般翻译成“用户界面”。UI最主要的功能就是建立用户和系统后台之间的联系，系统后台通过UI把数据转换成可视化的内容展示给用户，同时用户也要通过UI把操作指令（包括数据）传给系统后台。</p>
                <p class="k-article-paragraph">对UI不太熟悉的同学一听到这个概念，可能会觉得它的作用就是怎么把一个产品做的漂亮，所以UI设计师经常被人叫成美工。而事实上UI应该是负责“交互”和“视觉”这两方面的工作，这两部分内容构成了产品的用户体验。</p>
                <p class="k-article-paragraph">用户体验里最重要的应该是这个产品好不好用，也就是“交互”这部分，这其中包括产品功能是否完善，产品流程是否设计的合理，使用是否方便，操作是否流畅等。在一些大公司里，为了保证产品好用，还会专门设置交互设计师这个职位，专门做交互部分的设计工作。</p>
                <img class="k-article-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598590061340&di=ef05ed5d137bec5554c413b24448f8ef&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1610%2F10%2Fc9%2F28147000_1476068838008_mthumb.jpg" alt="测试图片">
            </div>
            <div class="k-article-unfold-btn" id="k-unfold-action">
                <i class="fa fa-angle-double-down fa-vibrate-y"></i>
            </div>
        </div>
        <div class="k-panel">
            <div class="k-panel-title">其他内容</div>
            <div class="k-panel-body">
                其他内容...
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    window.onload = () => {
        document.querySelector("#k-unfold-action").onclick = (e) => {
            document.querySelector('.k-article').classList.remove('fold');
        }
    }
</script>
</html>